<template>
    <view class="pub_page pub_login_other">
        <pub-head headerName="login_other" :headerConfig="headerConfig"></pub-head>
        <div class="page_box page_box_scroll" :style="{ 'height': `calc(100vh - ${headerHeight})` }">
            <div class="title">{{ openType == 1 ? '账号登录' : '手机号登录' }}</div>
            <div class="inputs" v-if="openType == 1">
                <div class="li">
                    <input class="inp" v-model="phone" type="number" maxlength="11" placeholder="请输入账号"
                        placeholder-style="color:#bbb">
                </div>
                <div class="li li_1">
                    <input v-if="!eyeShow" v-model="password" class="inp" password placeholder="请输入密码"
                        placeholder-style="color:#bbb">
                    <input v-if="eyeShow" v-model="password" class="inp" type="text" placeholder="请输入密码"
                        placeholder-style="color:#bbb">
                    <image @click="eyeShow = !eyeShow" class="psd_eye" mode="aspectFit"
                        :src="eyeShow ? 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_3.png' : 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_4.png'" />
                </div>
                <div class="li_msg" @click="$comFun.openWin('/pages/login/find_psd')">忘记密码？</div>
            </div>
            <div class="inputs" v-if="openType == 2">
                <div class="li">
                    <input class="inp" v-model="phone" type="number" maxlength="11" placeholder="请输入11位手机号"
                        placeholder-style="color:#bbb">
                </div>
                <div class="li li_2">
                    <input class="inp" v-model="code" type="number" placeholder="请输入4位验证码" placeholder-style="color:#bbb"
                        maxlength="4">
                    <div class="code_msg" @click="toSendCode">{{ code_msg }}</div>
                </div>
            </div>
            <div class="pub_btn pub_btn_big" @click="toLogin">登录</div>
            <div class="xieyi">
                <image @click="xieyi = !xieyi" class="icon" mode="aspectFit"
                    :src="xieyi ? 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_49.png' : 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_5.png'" />
                同意并接受 <div class="link" @click="$comFun.openWin('/pages/mine/document', { noticeId: 14 })">《用户注册协议》</div>
                <div class="link" @click="$comFun.openWin('/pages/mine/document', { noticeId: 15 })">《隐私协议》</div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '',//标题栏内容
            },
            headerHeight: getApp().globalData.headerHeight,
            openType: 1,//1账号登录  2手机号登录
            eyeShow: false,
            xieyi: false,

            password: '',

            phone: '',
            code: '',
            code_msg: '获取验证码',
        };
    },
    onLoad(options) {
        this.openType = options.openType || 1;
        // 支付宝小程序设置状态栏文字颜色
        this.$comFun.setZfbNavigationBar();
    },
    methods: {
        async toLogin() {
            if (!this.$comFun.ValidateMobile(this.phone)) {
                this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if ((this.openType == 1 && !this.password) || (this.openType == 2 && !this.code)) {
                this.$comFun.toast('请输入' + (this.openType == 1 ? '密码' : '验证码'));
                return;
            }
            if (!this.xieyi) {
                this.$comFun.toast('请同意《用户注册协议》和《隐私协议》');
                return;
            }
            const wxLoginInfo = uni.getStorageSync('wxLoginInfo');
            this.$comFun.openLoading();
            const res = await this.$request.post(this.openType == 1 ? 'mobile/LoginByPassword' : 'mobile/PhoneNumberVerificationLogin', {
                phone: this.phone,
                code: this.code,
                password: this.password,
                wechat_openid: wxLoginInfo.openid
            });
            console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.$comFun.toast('登录成功');
                this.$comFun.setUserToken(res.data.token);
                setTimeout(() => {
                    uni.switchTab({
                        url: '/pages/base/index'
                    });
                }, 1000);
            } else {
                this.$comFun.toast(res.msg);
            }
        },
        async toSendCode() {
            if (this.phone.length != 11) {
                this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (this.code_msg == '获取验证码') {
                this.$comFun.openLoading();
                const res = await this.$request.post('sms/sendLoginCode', {
                    phone: this.phone
                });
                // console.log(res);
                this.$comFun.closeLoading();
                if (res.code == 200) {
                    this.codeTime();
                } else {
                    this.$comFun.toast(res.msg);
                }
            }
        },
        codeTime() {
            this.code_msg = '剩 60 s';
            let count = 60;
            let time = setInterval(() => {
                if (count == 1) {
                    clearInterval(time);
                    this.code_msg = '获取验证码';
                    return;
                }
                count--;
                this.code_msg = '剩 ' + count + ' s';
            }, 1000);
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/login.scss";
</style>
